<template>
  <view class="ProgressBar">
    <template v-for="(item, index) of list">
      <view class="item" :key="index" :class="{ active: index < active }" @tap="handle(index + 1)">
        <view class="item-num">{{ index > 9 ? index + 1 : '0'+index + 1 }}</view>
        <text class="item-text">{{ item }}</text>
      </view>
      <view class="line" :key="index" v-if="index < list.length - 1" :class="{ activeLine: index < active }"></view>
    </template>
  </view>
</template>

<script>
  export default {
    methods: {
      handle(active) {
        if (active === this.active) return
        this.$emit('handle', active)
      }
    },
    props: {
      list: {
        required: true,
        type: Array
      },
      active: {
        required: true,
        type: Number
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ProgressBar {
    display: flex;
  }
  .item {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
  }
  .item-num {
    width: 60rpx;
    height: 60rpx;
    color: #c5c5c5;
    font-size: 30rpx;
    text-align: center;
    line-height: 60rpx;
    background: #e5e5e5;
    border-radius: 50%;
  }
  .item-text {
    color: #999;
    font-size: $fs - 4;
    margin-top: 15rpx;
  }
  .line {
    flex: 1;
    height: 2rpx;
    margin-top: 29rpx;
    background: #e5e5e5;
  }
  .active {
    .item-num {
      color: #fff;
      background: linear-gradient(180deg, #3a93da 0%, #2b5279 100%);
    }
    .item-text {
      color: $main;
    }
  }
  .activeLine {
    background: linear-gradient(135deg, #2b537a 0%, #3a92d9 100%);
  }
</style>
